<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;margin-top: 50px">
      <el-card style="width: 80%">
        <el-form :model="hotelData" :rules="rules" ref="hotelRef" v-if="status !== '已通过'&& status !== '待审核'">
          <div style="margin-left: 50px">
            <div style="display: flex">
              <div style="flex: 1">
                <el-form-item prop="name">
                  <div style="margin-top: 20px">酒店名称</div>
                  <div style="margin-top: 10px">
                    <el-input style="width: 300px"
                              size="medium"
                              placeholder="输入名称"
                              v-model="hotelData.name"
                              clearable>
                    </el-input>
                  </div>
                </el-form-item>

                <el-form-item prop="level">
                  <div>级别</div>
                  <div style="margin-top: 10px">
                    <el-select v-model="hotelData.level" placeholder="请选择" style="width: 300px">
                      <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>

                <el-form-item prop="location">
                  <div>地址</div>
                  <div style="margin-top: 10px">
                    <el-input style="width: 300px"
                              size="medium"
                              placeholder="输入地址"
                              v-model="hotelData.location"
                              clearable>
                    </el-input>
                  </div>
                </el-form-item>
              </div>
              <div style="flex: 1">
                <el-form-item prop="intro" style="margin-top: 40px">
                  <div>简介</div>
                  <div style="margin-top: 10px">
                    <el-input style="width: 300px"
                              size="medium"
                              placeholder="输入简介"
                              v-model="hotelData.intro"
                              clearable>
                    </el-input>
                  </div>
                </el-form-item>
                <el-form-item prop="price">
                  <div>最低价</div>
                  <div style="margin-top: 10px">
                    <el-input style="width: 300px"
                              size="medium"
                              placeholder="输入最低价"
                              v-model="hotelData.price"
                              clearable>
                    </el-input>
                  </div>
                </el-form-item>
                <div style="margin-top: 100px;margin-left: 150px">
                  <el-button type="primary" @click="save" @keyup.enter="save">申请</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-form>
        <span v-if="Status" style="font-size: 24px">审核中...</span>
        <span v-if="status === '已通过'" style="font-size: 24px">审核通过</span>
      </el-card>
    </div>
<!--    <el-button type="primary" @click="dialogPicture = true">申请</el-button>-->
    <el-dialog title="添加图片" :visible.sync="dialogPicture" width="30%">
      <div style="margin-top: 10px;display: flex;justify-content: center">
        <el-upload
            class="avatar-uploader"
            :action="`http://localhost:8000/hotel_image_upload/${this.hotel_id}/`"
            :file-list="url? [url] : []"
            list-type="picture"
            name="url"
            :on-success="handleAvatarSuccess"
        >
          <el-button type="primary">上传图片</el-button>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "hotelApplication",
  data() {
    return {
      options: [{
        value: '1',
        label: '一星'
      }, {
        value: '2',
        label: '二星'
      }, {
        value: '3',
        label: '三星'
      }, {
        value: '4',
        label: '四星'
      }, {
        value: '5',
        label: '五星'
      }],
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      hotel: [],
      hotelData: {},
      level: "",
      hotel_id: "",
      url: "",
      Status: false,
      status: "",
      dialogPicture: false,
      rules: {
        name: [
          {required: true, message: '请输入酒店名称', trigger: 'blur'},
        ],
        level: [
          {required: true, message: '请输入酒店等级', trigger: 'blur'},
        ],
        location: [
          {required: true, message: '请输入酒店地址', trigger: 'blur'},
        ],
        intro: [
          {required: true, message: '请输入酒店简介', trigger: 'blur'},
        ],
        price: [
          {required: true, message: '请输入价格', trigger: 'blur'},
          {pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的价格', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    handleAvatarSuccess(response, file, fileList) {
      // 把shops的图片属性换成上传的图片的链接
      this.url = response.data
      //图片上传成功后跳转到增加房间界面
      this.$router.push({
        path: '/business/roomAdd',
        query: {
          name: this.hotelData.name
        }
      })
    },
    load_business_id() {
      this.$request.post('/hotel_search/', {
        "business_id": this.user.id,
      }).then(res => {
        if (res.code === '200') {
          this.hotel = res.data.hotel_list;
          const length = this.hotel.length;
          this.hotel_id = this.hotel[length - 1].id;
          this.hotelData = this.hotel[length - 1]
          console.log("hotel", this.hotel)
          this.status = this.hotelData.status
          if (this.hotelData.status === '待审核') {
            this.Status = true
            console.log("ygg", this.Status)
          }
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    save() {
      this.$refs.hotelRef.validate((valid) => {
        if (valid) {
          this.$request.post('/hotel_add/', {
            "business_id": this.user.id,
            "name": this.hotelData.name,
            "level": this.hotelData.level,
            "location": this.hotelData.location,
            "price": this.hotelData.price,
            "intro": this.hotelData.intro,
          }).then(res => {
            if (res.code === '200') {
              this.$message.success('提交成功')
              //跳转到roomAdd页面并传送hotelData.name
              this.load_business_id()
              this.dialogPicture = true
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  },
  mounted() {

  },
  created() {
    this.load_business_id()
  }
}
</script>

<style scoped>

</style>